<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>部门信息</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        .layui-input-block {
            margin-left: 75px;
        }

        .layui-form-label {
            width: 70px;
            padding: 9px 0px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form method="post" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" th:value="${dept?.name}"
                       lay-reqtext="部门名称不能为空" placeholder="请输入部门名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级部门</label>
            <div class="layui-input-block">
                <input id="parentName" type="text" name="parentName" readonly th:value="${dept?.parentName}"
                       placeholder="请选择上级部门" class="layui-input" style="width:80%;float:left;">
                <button class="layui-btn layui-bg-gray" type="button" id="parent-clear" style="width:18%;float:right;">清空</button>
            </div>
            <div class="layui-hide">
                <input id="parentId" placeholder="隐藏的上级部门id" value="0" name="parentId" th:value="${dept?.parentId}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门负责人</label>
            <div class="layui-input-block">
                <input id="empName" type="text" name="empName" readonly th:value="${dept?.empName}"
                       placeholder="请选择部门负责人" class="layui-input" style="width:80%;float:left;">
                <button class="layui-btn layui-bg-gray" type="button" id="emp-clear" style="width:18%;float:right;">清空</button>
            </div>
            <div class="layui-hide">
                <input id="empId" placeholder="隐藏的部门负责人id" value="0" name="empId" th:value="${dept?.empId}">
                <input id="empTelephone" placeholder="隐藏的部门负责人电话" value="0" name="empTelephone" th:value="${dept?.empTelephone}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限等级</label>
            <div class="layui-input-block">
                <select id="permission" name="permission" lay-verify="aihao">
                    <option value="0"></option>
                    <option th:each="permission,permissions:${permissions}"
                            th:value="${permission.value}"
                            th:text="${permission.name}"
                            th:selected="${dept?.permission == permission.value}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">部门描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" th:utext="${dept?.description}"
                          placeholder="请输入部门描述"></textarea>
            </div>
        </div>
        <div class="layui-hide">
            <button type="button" lay-submit id="save" lay-filter="save">确认</button>
        </div>
    </form>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.$;

        //上级部门
        var parentName = $("#parentName");
        var parentId = $("#parentId");
        parentName.click(function () {
            var open = layer.open({
                title: '选择上级部门',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/sys/dept/select',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var parent = iframeWin.checkedbox;
                    parentName.val(parent['name']);
                    parentId.val(parent['id']);
                    layer.close(index);
                }
            });
        });
        $("#parent-clear").click(function () {
            parentId.val('0');
            parentName.val('');
        });

        //部门负责人
        var empName = $("#empName");
        var empId = $("#empId");
        var empTelephone = $("#empTelephone");
        empName.click(function () {
            var open = layer.open({
                title: '选择部门负责人',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/emp/select/one',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var checkedbox= iframeWin.checkedbox;
                    empId.val(checkedbox['id']);
                    empName.val(checkedbox['name']);
                    empTelephone.val(checkedbox['empTelephone']);
                    layer.close(index);
                }
            });
        });
        $("#emp-clear").click(function () {
            empId.val('0');
            empName.val('');
        });

    });
</script>
</body>
</html>